<script lang="ts" setup>
import store from "../pina.ts"
import {ref} from "vue"
import {useRouter} from 'vue-router'
import Pagination from "./base/pagination.vue";
import {deil, getOrder, postRefundOrder} from "../serve.ts";
import {ElMessage} from "element-plus";

const
    pina = store(),
    itemData: any = ref({list: []}),
    fromData = ref({
      page: 1,
      size: 5,
      orderId: '',
      status: '',
      refundStatus: ''
    }),
    listLoading = ref(false),
    router = useRouter(),
    visible = ref(false),
    fromRefund = ref({orderId: '', isAgree: true})
;

function sizeChange(size: number) {
  fromData.value.size = size
  get()
}

function currentChange(currPage: number) {
  fromData.value.page = currPage
  get()
}

function get() {
  getOrder({...fromData.value}).then(r => {
    itemData.value = r
  })
}

get()

function editChange(id: string) {
  router.push({path: '/infoOrder', query: {id}}).catch(() => true)
}

function refundChange() {
  postRefundOrder({...fromRefund.value}).then(() => {
    ElMessage({type: 'success', message: fromRefund.value['isAgree'] ?'退款成功！' :'拒绝成功！'})
    visible.value = false
    get()
  }).catch(() => ElMessage({type: 'error', message: '退款失败！'}))
}
function orderTakeChange(id:any) {
  deil(id).then(()=>{
    ElMessage({type: 'success', message: '发货成功！'})
    get()
  })
}
</script>

<template>
  <el-scrollbar>
    <el-card>
      <div slot="header">
        <el-form-item label="订单状态：">
          <el-radio-group v-model="fromData.status" @change="get">
            <el-radio-button :label="''">全部</el-radio-button>
            <el-radio-button :label="0">待发货</el-radio-button>
            <el-radio-button :label="1">待收货</el-radio-button>
            <el-radio-button :label="2">已收货</el-radio-button>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="退款状态：">
          <el-radio-group v-model="fromData.refundStatus" @change="get">
            <el-radio-button :label="''">全部</el-radio-button>
            <el-radio-button :label="1">退款中</el-radio-button>
            <el-radio-button :label="3">已退款</el-radio-button>
          </el-radio-group>
        </el-form-item>
        <el-input v-model="fromData['orderId']" placeholder="请输入订单号搜索" style="width: 300px;">
          <template #append>
            <el-button icon="Search" @click="get"/>
          </template>
        </el-input>
      </div>
    </el-card>
    <el-card>
      <el-table v-loading="listLoading" :data="itemData['list']"
                :header-cell-style="{ fontWeight: 'bold' }" element-loading-text="加载中..." size="small">
        <el-table-column align="center" label="用户id" min-width="100" prop="uid"/>
        <el-table-column align="center" label="用户名" min-width="80" prop="username" show-overflow-tooltip/>
        <el-table-column align="center" label="订单id" min-width="100" prop="id"/>
        <el-table-column align="center" label="是否支付" min-width="80" prop="paid">
          <template #default="s">{{ s.row.paid == 0 ? '否' : '是' }}</template>
        </el-table-column>
        <el-table-column align="center" label="实付金额" prop="payPrice" width="80"/>
        <el-table-column align="center" label="订单总价" min-width="80" prop="totalPrice"/>
        <el-table-column align="center" label="支付时间" min-width="130" prop="payTime"/>
        <el-table-column align="center" label="商品总数" min-width="80" prop="totalNum"/>
        <el-table-column align="center" label="收货姓名" min-width="80" prop="realName"/>
        <el-table-column align="center" label="收货电话" min-width="80" prop="userPhone"/>
        <el-table-column align="center" label="收货地址" min-width="80" prop="userAddress"/>
        <el-table-column align="center" label="退款状态" min-width="80" prop="refundStatus">
          <template #default="s">
            {{ s.row.refundStatus == 0 ? '无' : (s.row.refundStatus == 1 ? '退款中' : '已退款') }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="状态" width="60">
          <template #default="scope">
            {{ scope['row']['status'] == 0 ? '待发货' : (scope['row']['status'] == 1 ? '待收货' : (scope['row']['status'] == 2 ? '已收货' : '')) }}
          </template>
        </el-table-column>
        <el-table-column align="center" fixed="right" label="操作" width="200">
          <template #default="s">
            <el-button circle icon="More" @click="editChange(s['row']['id'])"/>
            <el-button v-if="s['row']['refundStatus'] == 1" size="small"
                       @click="()=>{fromRefund.orderId = s['row']['id'];visible = true }">退款
            </el-button>
            <el-button v-if="s['row']['status'] == 0 && s['row']['refundStatus'] == 0" size="small"
                       @click="orderTakeChange(s['row']['id'])">发货
            </el-button>
          </template>
        </el-table-column>

      </el-table>
      <div class="page">
        <pagination :pageCurrent="itemData?.current" :pageSize="itemData?.size"
                    :small="pina.app.browser.isMini" :total="itemData?.total"
                    class="page" @size-change="sizeChange" @current-change="currentChange"/>
      </div>
    </el-card>
    <el-dialog v-model="visible" :before-close="()=>visible = false" title="退款" width="350">
      <el-form label-width="100px" size="default">
        <el-radio-group v-model="fromRefund.isAgree">
          <el-radio :label="false">拒绝</el-radio>
          <el-radio :label="true">同意</el-radio>
        </el-radio-group>
        <div style="margin-left: 100px;width: 200px;display: flex;justify-content: flex-end;">
          <el-button @click="()=>visible = false">取消</el-button>
          <el-button type="success" @click="refundChange">提交</el-button>
        </div>
      </el-form>
    </el-dialog>
  </el-scrollbar>
</template>

<style lang="scss" scoped>
.page {
  width: 100%;
  display: flex;
  justify-content: flex-end;
}
</style>